<template>
  <div>
    <div class="header">
      <h4>订单分布</h4>
      <span class="time">2023-3 - 2023-8</span>
    </div>
    <div class="content">
      <p>单位：笔</p>
    </div>

    <div id="ddCharts" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const ddCharts = echarts.init(document.getElementById('ddCharts'))

    const option = {
      dataset: [

        {
          dimensions: ['name', 'score'],
          source: [['北京', 1913], ['天津', 5154], ['河北', 987], ['山西', 3587], ['内蒙古', 8756], ['辽宁', 2269], ['吉林', 26554],
            ['黑龙江', 6665], ['上海', 3215], ['江苏', 4785], ['浙江', 1235], ['安徽', 2455], ['福建', 6977], ['江西', 5899],
            ['山东', 13555], ['河南', 19665], ['湖北', 9888], ['湖南', 23438], ['广东', 31000], ['广西', 12154], ['海南', 13141],
            ['重庆', 8180], ['四川', 36878], ['贵州', 25444], ['云南', 3698], ['西藏', 9788], ['陕西', 6547], ['甘肃', 24555],
            ['青海', 17489], ['宁夏', 36987], ['新疆', 20001], ['台湾', 19787], ['香港', 14785], ['澳门', 14787]]
        },
        {
          transform: {
            type: 'sort',
            config: { dimension: 'score', order: 'asc' }
          }
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function(params) {
          const date = params[0].axisValue
          var value = params[0].data[1]

          return `省份：  ${date} <br> 订单总量:  ${value}`
        },
        // 自定义提示框样式
        textStyle: {
          whiteSpace: 'pre-wrap'
        }
      },
      grid: {
        top: 0,
        x: 45,
        x2: 30,
        y2: 100
      },
      yAxis: {
        type: 'category',
        axisLabel: { interval: 0, rotate: 30 }
      },
      xAxis: {},
      series: {
        type: 'bar',
        encode: { x: 'score', y: '' },
        datasetIndex: 1
      }
    }
    // 绑定数据和配置项并渲染
    ddCharts.setOption(option)
  }
}
</script>

  <style lang="scss" scoped>
  .header{
      margin-bottom: 20px;
      h4{
          margin: 0;
      }
      display: flex;
      justify-content: space-between;
      .time{
      font-size: 14px;
      color: #818693;
      display: flex;
      -webkit-box-align: center;
      cursor: pointer;
      }
  }
  .item{
      width: 45%;
      height: 85px;
      p{
        font-size: 14px;
      margin-bottom: 10px;
      }

      .num{
        width: 79px;
        height: 36px;
        font-size: 32px;
      font-weight: 700;
      color: #e15536;
      cursor: pointer;
      }
    }
    .display{
      margin: 40px auto;
      margin-bottom: 0;
      width: 80%;
      display: flex;
      justify-content: center;
    }
    #ddCharts{
      margin: 0 auto;
      width: 100%;
      height: 600px;
    }
  </style>

